<!--
  *@Description : In user setting edit
  *@author 萧红
  *@date 2020-03-04 16:52
 * @LastEditTime: 2023-03-21 12:02:49
  *@LastEdititors
-->
<template>
    <div id="home">
     <div v-show="!isShowAddDongTai">
       <top :data="labelData" @sceneChange="sceneChange"></top>
       <div :style="{height:$inerHeight + 'px'}">
         <!--<cube-scroll ref="scroll" :data="[]">-->
         <cube-scroll  :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp" ref="scroll" :data="data">
           <div class="mode" v-for="(mData,mindex) in data" :key="mindex">
             <!--个人信息区域-->
             <Info :info="mData.info" :inGuanZhu="mData.inGuanZhu" @changeInGuanZhu="(state)=>mData.inGuanZhu=state"></Info>
               <!--文本区域-->
               <div class="text" v-if="mData.content.length>0"  @click="goDetail(mData)">
                 <pre>{{mData.content}}</pre>
                 <!--{{mData.content}}-->
               </div>
               <!--多张图片区域-->
               <div class="view" v-if="mData.type==='image'"  @click.self="goDetail(mData)">
                 <img-area :imgFileList="mData.urls"></img-area>
                 <!--<img :src="imgItem"  alt="" v-for="(imgItem, mindex) in mData.imgs" :key="imgItem" @click="handleImgsClick(mData.imgs, mindex)"/>-->
               </div>
               <!--视频区域-->
               <div class="video" v-if="mData.type==='video'">
                 <my-video :vedio-url="mData.urls[0]" :index="mData.videoIndex!==-1?mData.videoIndex:''" :poster="mData.urls[1]"></my-video>
               </div>
             <!--标签区域-->
             <div class="label">
               <div v-for="label in mData.labels" :key="label" @click="toNewPage({path:'/cosba', query:{name:label}})">{{label}}</div>
             </div>
             <!--用户交互区域-->
             <div class="action">
               <!--点赞-->
               <div @click="dianzan(mData)">
                 <span class="iconfont icondamuzhi" :class="{'selected': mData.indianzan}"></span>
                 <span class="number">{{mData.dianzan}}</span>
               </div>
               <!--评论-->
               <div @click="goDetail(mData)">
                 <span class="iconfont iconxiaoxi1"></span>
                 <span class="number">{{mData.pinglun}}</span>
               </div>
               <!--收藏-->
               <div @click="shouChang(mData)">
                 <span class="iconfont iconshoucang" :class="{'selected':mData.inshouchang}"></span>
                 <span class="number">{{mData.shoucang}}</span>
               </div>
             </div>
           </div>
         </cube-scroll>
       </div>
       <Bottom :select-index="0"></Bottom>
     </div>
    </div>
</template>

<script>
import top from '../../components/Top'
import Bottom from '../../components/Bottom'
import imgArea from '../../components/imgArea'
import Info from '../../components/Info'
import MyVideo from '../../components/MyVideo'
import {PullDownRefreshAndPullUpLoad} from '../../common/js/mixins'
export default {
  name: 'home',
  mixins: [PullDownRefreshAndPullUpLoad],
  components: {
    top,
    Bottom,
    imgArea,
    Info,
    MyVideo
  },
  mounted () {
    // console.log('请求推荐数据')
    this.getData()
  },
  activated () {
    console.log('加载缓存页面')
  },
  computed: {
  },
  data () {
    return {
      labelData: [
        {
          name: '推荐',
          scene: 'recommend'
        },
        {
          name: '关注',
          scene: 'guanzhu'
        },
        {
          name: '广场',
          scene: 'square'
        }], // 请求标签
      scene: 'recommend',
      isShowAddDongTai: false, // 是否显示发布动态界面
      data: [] // 保存首页推荐数据
      // data: [{
      //   info: {
      //     img: 'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917532533,163531716&fm=26&gp=0.jpg',
      //     name: 'saberLily',
      //     sex: '女',
      //     time: '3月前'
      //   },
      //   content: '祝眉目舒展 询问东安',
      //   imgs: [
      //     'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3729370217,3656240524&fm=26&gp=0.jpg',
      //     'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3917532533,163531716&fm=26&gp=0.jpg',
      //     'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1688806058,3868462331&fm=26&gp=0.jpg'
      //   ],
      //   labes: [
      //     'cos日常',
      //     'saber系列'
      //   ],
      //   dianzan: 220,
      //   pinglun: 8,
      //   shoucang: 2,
      //   type: 'img'
      // }]
    }
  },
  methods: {
    // 下拉刷新
    onPullingDown () {
      this.page = 1
      this.getData()
    },
    onPullingUp () {
      this.page++
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page,
        scene: this.scene
      }
      this.apis.getRecommendData(params).then((res) => {
        if (res.data.length === 0) {
          this.$refs.scroll.forceUpdate()
        } else {
          res.data.forEach((item) => {
            if (item.type === 'video') {
              item.videoIndex = this.index // 保存视频的index
              this.index++
            } else {
              item.videoIndex = -1
            }
          })
          this.data = this.data.concat(res.data)
        }
        // this.$refs.scroll.refresh()
        // console.log(this.data)
      })
    },
    sceneChange (scene) {
      this.scene = scene
      this.data = []
      this.index = 0
      this.page = 1
      this.$toast('加载中', 'loading', 9900)
      this.getData()
    },
    getData () {
      let params = {
        userId: localStorage.getItem('userId'),
        page: this.page,
        scene: this.scene
      }
      this.apis.getRecommendData(params).then((res) => {
        this.data = res.data
        this.index = 0
        this.data.forEach((item) => {
          if (item.type === 'video') {
            item.videoIndex = this.index // 保存视频的index
            this.index++
          } else {
            item.videoIndex = -1
          }
        })
        this.$toast('加载成功', 'correct', 1000)
        // this.$refs.scroll.refresh()
        // console.log(this.data)
      })
    },
    // 去动态详情页
    goDetail (data) {
      // console.log(data)
      this.toNewPage({name: 'dongtaiDetail', query: {data: JSON.stringify(data)}})
    },
    dianzan (data) {
      let params = {
        userId: localStorage.getItem('userId'),
        did: data.did
      }
      if (data.indianzan === 0) {
        this.apis.addDianZan(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg, 'error', 1000)
          }
        })
        console.log(params)
      } else {
        this.apis.cancelDianZan(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg)
          }
        })
      }
    },
    shouChang (data) {
      let params = {
        userId: localStorage.getItem('userId'),
        did: data.did
      }
      if (data.inshouchang === 0) {
        this.apis.addShouChang(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            setTimeout(this.getData, 1000)
          } else {
            this.$toast(res.msg, 'error', 1000)
          }
        })
        console.log(params)
      } else {
        this.apis.cancelShouChang(params).then(res => {
          if (res.code === 200) {
            this.$toast(res.msg, 'correct')
            this.getData()
          } else {
            this.$toast(res.msg)
          }
        })
      }
    }
  }
}
</script>
<style  lang="stylus">
  @import "../../../node_modules/stylus-px2rem";
#home
{
  position relative
  .mode
  {
    padding 2px 2px;
    border-bottom 3px solid #f0f0f0
    .text
    {
      width 100%
      padding 2px 2px;
      display inline-block
      pre {
        line-height 10px
        text-align left
        font-family 'Avenir', Helvetica, Arial, sans-serif
        white-space pre-wrap
      }
    }
    .view,.video{
    }
    .label
    {
      display flex
      flex-direction row
      justify-content flex-start
      padding 2px 1.3px;
      div
      {
        display inline
        margin 2px
        padding 0px 2px
        height 10px;
        line-height 10px;
        background #fff1f1;
        color:deeppink;
      }
    }
    .action
    {
      width 100%;
      display grid
      height:15px
      padding 2px 2px
      grid-template-columns repeat(3,25%)
      grid-column-gap 12%
      .selected
      {
        color #ff4466
      }
      span{
        font-size 10px
        height:15px;
        line-height 15px;
        color:#ccc;
      }
      .number
      {
        font-size: 8px
        padding 0px 2px
      }
      border-top 1px solid #eee
    }
  }
}

</style>
